<div class="modal-dialog prevent-close" id="setCounterModal" role="document">
    <form data-bind="submit: updateCounter" autocomplete="off" novalidate>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-cancel"></i></button>
                <h2 class="modal-title" id="myModalLabel">
                    <i class="icon-new-counter"></i>
                    <span data-bind="if: createNewCounter()">Add New Counter</span>
                    <span data-bind="if: !createNewCounter()">Update Counter</span>
                </h2>
            </div>
            <div class="modal-body">
                <div data-bind="visible: createNewCounter()">
                    <div class="padding">
                        <div class="form-group row" data-bind="validationElement: counterName">
                            <div class="col-md-3">
                                <label for="counterNameInput" class="control-label">Counter Name<i class="required"></i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" id="counterNameInput" data-bind="textInput: counterName" placeholder="Enter counter name" class="form-control" autofocus>
                            </div>
                        </div>
                        <div class="form-group row" data-bind="validationElement: newTotalValue">
                            <div class="col-md-3">
                                <label for="counterValueInput" class="control-label">Counter Value<i class="required"></i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="number" id="counterValueInput" data-bind="numericInput: newTotalValue" placeholder="Enter counter value" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="visible: !createNewCounter()">
                    <div class="padding">
                        <div class="form-group row">
                           <div class="col-md-3">
                              <label for="counterName" class="control-label">Counter Name</label>
                           </div>
                           <div class="col-md-9">
                              <input type="text" id="counterName" data-bind="textInput: counterName" disabled class="form-control">
                           </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <label for="counterTotalValue" class="control-label">Counter Value</label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" id="counterTotalValue" data-bind="textInput: totalValue().toLocaleString()" class="form-control" disabled>
                            </div>
                        </div>
                        <div class="form-group row" data-bind="validationElement: newTotalValue">
                            <div class="col-md-3">
                                <label for="counterTotalInput" class="control-label">Set New Value<i class="required"></i></label>
                            </div>
                            <div class="col-md-9">
                                <input type="number" id="counterTotalInput" data-bind="numericInput: newTotalValue" placeholder="Enter new counter value" class="form-control" autofocus>
                            </div>
                        </div>
                    </div>
                    <div class="panel padding" data-bind="visible: showPerNodeValues">
                        <div class="form-group">
                            <div data-bind="foreach: counterValuesPerNode">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label data-bind="visible: $index() === 0" class="control-label">Values per Node:</label>
                                    </div>
                                    <div class="col-md-3" data-bind="attr: { title: 'Database ID: ' + databaseId }">
                                        <span class="small">Node:</span>
                                        <label class="control-label" data-bind="text: nodeTag"></label>
                                    </div>
                                    <div class="col-md-3">
                                        <span class="small">Value:</span>
                                        <label class="control-label" data-bind="text: nodeCounterValue.toLocaleString()"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="padding text-right">
                    <button data-dismiss="modal" aria-label="Close" class="btn btn-default">
                        <i class="icon-cancel"></i><span>Cancel</span>
                    </button>
                    <button type="submit" class="btn btn-primary" data-bind="disable: $root.spinners.update(), css: { 'btn-spinner': $root.spinners.update }">
                        <i class="icon-save"></i>
                        <span data-bind="if: !createNewCounter()">Update</span>
                        <span data-bind="if: createNewCounter()">Create</span>
                    </button> 
                </div>
            </div>
        </div>
    </form>
</div>
